<template>
  <div class="upload-avatar back-page">
    <HeaderTop>
      <template #left>
        <van-icon
          name="arrow-left"
          @click="router.back()"
          size="20"
          style="transform: translateX(-0.3rem)"
        />
      </template>
      <template #center>
        <div class="fs-1 wd-75 center strong" style="color: white">上传头像</div>
      </template>
    </HeaderTop>
    <div class="upload pt-2"><van-uploader   v-model="fileList" :max-count="1" :after-read="afterRead" :before-read="beforeRead"/></div>
    <div class="change-avatar">
      <van-button round block type="primary" :to="{ name: 'AddAddress' }" :disabled="fileList.length !== 1">
        修改头像
      </van-button>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const fileList = ref([

]);
const beforeRead = file=>{

  return true
}
const afterRead = file => {
    file.status = "uploading";
    file.message = "上传中...";
    const timer = setTimeout(()=>{
        file.status = 'done'
        clearTimeout(timer)
    },1000)
};
</script>

<style lang="scss" scoped>
.upload-avatar {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 21;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  .upload{
    flex: 1;
    display: flex;
    justify-content: center;
  }
  .change-avatar{
    margin: 16px;
  }
}
</style>
